import React, { useState, useEffect, useRef } from 'react';
import { Input, Select, Button, Cascader, Drawer } from 'antd';
import {
  getGoodTypes,
  addGoodType,
  delGoodType,
  updataGoodType,
} from '../../../apis/goods';
import ShopTable from '../../../components/shop/shopTable';
import ShopFrom2 from '../../../components/shop/shopFrom2';
import ShopFrom from '../../../components/shop/shopFrom';
import querystring from 'querystring';
const { Option } = Select;

export default function index() {
  const [visible, setVisible] = useState(false);
  const [visible2, setVisible2] = useState(false);
  const [goodData, setGoodData] = useState([]);
  const [showData, setShowData] = useState([]);
  const [delData, setDelData] = useState([]);
  const [status, setStatus] = useState();
  const [updataData, setUpdataData] = useState();
  const title = useRef();
  //挂载完毕后执行
  useEffect(() => {
    getData();
  }, []);
  const getData = async () => {
    const result = await getGoodTypes();
    setGoodData({ ...result.rows });
    setShowData({ ...result.rows });
  };
  function handleChange(value) {
    console.log(`selected ${value}`);
  }
  const showDrawer = () => {
    setVisible(true);
  };
  const onClose = () => {
    setVisible(false);
  };
  const showDrawer2 = () => {
    setVisible2(true);
  };
  const onClose2 = () => {
    setVisible2(false);
  };
  //获取修改商品类型编号
  const findUpdataId = (value) => {
    setUpdataData({ ...value });
  };
  //修改商品类型
  const updata = async (value) => {
    console.log(value);
    const result = await updataGoodType(querystring.stringify(value));
    setVisible2(false);
    getData();
  };
  //查询商品类型
  const find = async () => {
    const params = { name: title.current.state.value, status: status };
    const result = await getGoodTypes(querystring.stringify(params));
    setGoodData({ ...result.rows });
  };
  const statusChange = (value) => {
    setStatus(value);
  };
  //添加商品类型
  const add = async (value) => {
    const result = await addGoodType(querystring.stringify(value));
    getData();
    setVisible(false);
  };
  //获取需要删除的商品类型id
  const finddelData = async (value) => {
    setDelData(...value);
  };
  //删除商品类型
  const del = async () => {
    const result = await delGoodType(delData);
    getData();
  };
  return (
    <div>
      <Input
        addonBefore="商品分类名称"
        placeholder="请输入商品名称"
        style={{ width: '300px' }}
        ref={title}
      />
      <Input addonBefore="状态" style={{ width: '50px', marginLeft: '20px' }} />
      <Select
        defaultValue={1}
        style={{ width: 120 }}
        onChange={handleChange}
        onChange={statusChange}
      >
        <Option value={1}>启用</Option>
        <Option value={2}>停用</Option>
      </Select>
      <Button style={{ float: 'right', marginLeft: '20px' }}>重置</Button>
      <Button style={{ float: 'right' }} onClick={find}>
        查询
      </Button>
      <p>
        <Button
          style={{ float: 'left', marginTop: '10px' }}
          onClick={showDrawer}
        >
          新增
        </Button>
        <Button
          style={{ float: 'left', marginLeft: '10px', marginTop: '10px' }}
          onClick={del}
        >
          删除
        </Button>
      </p>
      <ShopTable
        findUpdataId={findUpdataId}
        showDrawer2={showDrawer2}
        goodData={goodData}
        delData={finddelData}
      ></ShopTable>
      <Drawer
        title="商品添加"
        placement="right"
        onClose={onClose}
        visible={visible}
      >
        <ShopFrom showData={showData} add={add}></ShopFrom>
      </Drawer>
      <Drawer
        title="商品修改"
        placement="right"
        onClose={onClose2}
        visible={visible2}
      >
        <ShopFrom2
          updata={updata}
          updataData={updataData}
          showData={showData}
          add={add}
        ></ShopFrom2>
      </Drawer>
    </div>
  );
}
